<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="姓名" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column  label="操作" >
          <template >
           <el-button type="default" size="mini" >冻结</el-button>
          <el-button type="danger" size="mini">删除</el-button>
          </template>
         
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import dateFormat from '@/plugins/timeFormat.js'
export default {
  data() {
    return {
       tableData: []
    }
  },
  methods: {
  async getUserList(){
     let res = await this.$axios.get("/api2/admin/userList")
    if(res.status!==0)return this.$message.error("服务器异常,获取信息失败")
    res.data.userList.forEach(item=>{
      item.date = dateFormat(item.date,'yyyy-MM-dd hh:mm:ss')
      item.role=item.role==='admin'?'管理员':'普通用户'
    })
    this.tableData = res.data.userList
    console.log(this.tableData)
    }
  },
  async created() {
   this.getUserList()
  },
}
</script>

<style scoped>
.el-card {
  margin-top: 15px;
  padding: 10px;
}
</style>
